<template>
	<div class="product row">

		<!-- <flexbox class="bgwhite">
		<flexbox-item >
			<group gutter="0">
		      <cell is-link  @click.native="addressList()">
		      	<span class="h3" slot="title">
		      		收货人信息：{{mail.lxr_name}} <span class="hui h5">{{mail.lxr_mobile}}</span>
		      	</span>
		      	<span class="h4" slot="inline-desc">
		      		{{mail.address}}
		      	</span>
		      </cell>
		    </group>
		</flexbox-item>
		</flexbox> -->

		<flexbox class="bgwhite">

		

	      <flexbox-item>
	      	<yd-preview :buttons="[]">
		        <yd-preview-header>
		            <div slot="left">{{product_name}}</div>
		        </yd-preview-header>

		        <yd-preview-item>
		            <div slot="left">产品型号</div>
		            <div slot="right">{{attr_name}}</div>
		        </yd-preview-item>
		        <yd-preview-item>
		            <div slot="left">产品价格</div>
		            <div slot="right">
		            	<span class="red"><em>¥</em>{{guide_price}}</span> * {{num}}
		            </div>
		        </yd-preview-item>
		        <!-- <yd-preview-item>
		            <div slot="left">邮费</div>
		            <div slot="right">
		            	<span class="red"><em>¥</em>{{postage}}</span>
		            </div>
		        </yd-preview-item> -->
		    </yd-preview>
	      </flexbox-item>
	    </flexbox>

	    <flexbox>
	      <flexbox-item >
	      	<yd-cell-group>
		        <yd-cell-item>
		            <span slot="left">购买数量：</span>
		            <span slot="right"><count v-bind:config="countpara" ></count></span>
		        </yd-cell-item>
			</yd-cell-group>
	      </flexbox-item>
	    </flexbox>

	    <flexbox>
	    	<flexbox-item>
	      		<yd-cell-group>
			        <yd-cell-item>
			            <span slot="left">姓名：</span>
			            <yd-input slot="right" v-model="user.name" placeholder="请输入姓名"></yd-input>
			        </yd-cell-item>

			        <yd-cell-item>
			            <span slot="left">手机号：</span>
			            <yd-input slot="right" v-model="user.mobile" regex="mobile" placeholder="请输入手机号码"></yd-input>
			        </yd-cell-item>

			        <yd-cell-item v-if="cardno_state == '1'">
			            <span  slot="left">身份证：</span>
			            <yd-input slot="right" v-model="user.cardno" placeholder="请输入身份证号"></yd-input>
			        </yd-cell-item>

			        <!-- 
			        tour_date_type有三种情况，0：不启用出游时间，1:启用出游时间，日期：价格日历 
			        -->
			        <yd-cell-item v-if="tour_date_type != '0'" arrow>
			            <span  slot="left">出游日期：</span>
			            <yd-datetime 
			            v-if="tour_date_type == '1'"
			            ref="datetime" type="date" 
			            v-model="user.tour_date" slot="right"
			            :start-date="tour_date_start"
			            :end-date="tour_date_end"
			            >
			            </yd-datetime>

			            <span slot="right"
			            v-if="tour_date_type != '1'"
			            >{{tour_date_type}}</span>
			        </yd-cell-item>


			        <yd-cell-group>
				        <yd-cell-item>
				            <yd-textarea slot="right" v-model="user.remark" 
				            placeholder="给商家留言" 
				            maxlength="100"></yd-textarea>
				        </yd-cell-item>
				    </yd-cell-group>


			    </yd-cell-group>
	    	</flexbox-item>
	    </flexbox>


	    <flexbox class="footer1 bgwhite ">
	    	<flexbox-item :span="2/3" class="h4 total pr10">
	    		合计 : {{parseFloat(guide_price * num + postage).toFixed(2)}}
	    	</flexbox-item>
	    	<flexbox-item :span="1/3" >
	    		<div class="buy bgred h4" v-on:click="gogo()">提交订单</div>
	    	</flexbox-item>
	    </flexbox>
	</div>


</template>


<script >

import count from '../util/count';
import { date2str, identityCodeValid } from '../../util/util';
import { mapGetters, mapActions } from 'vuex'
import { Group, Cell } from 'vux'

export default {

	name : 'makeorder',

	data () {
		return {
			countpara : {
				count : parseInt(this.$route.query.num),
				max : parseInt(this.$route.query.max),
			},

			user : {
				name : '',
				mobile : '',
				cardno : '',
				tour_date : date2str(new Date()),
				remark : '',
			},
		}
	},

	computed : {

		product_pic () {
			return this.$route.query.product_pic;
		},

		product_name () {
			return this.$route.query.porduct_name;
		},

		attr_name () {
			return this.$route.query.attr_name;
		},

		guide_price () {
			return this.$route.query.guide_price;
		},

		tour_date_type () {
			return this.$route.query.tour_date_type;
		},

		tour_date_start () {
			return this.$route.query.tour_date_start;
		},

		tour_date_end () {
			return this.$route.query.tour_date_end;
		},

		cardno_state () {
			return this.$route.query.cardno_state;
		},

		num () {
			return this.countpara.count;
		},

		postage () {
			return 0;//this.$route.query.postage;
		},

		u () {
			return this.$route.query.u;
		},

		mail () {
			if(this.mailList.length > 0){
				var aa = this.mailList[0].lxr_address.split('@dlq@');

				return {...this.mailList[0], 'address' : aa[0] + ',' + aa[1]};
			}else{
				return {};
			}
		},

		...mapGetters(['company_code', 'userdata', 'mailList']),

	},

	components : {
		count,
		Group,
		Cell,
	},

	mounted () {
		this.$store.dispatch('getMailList', {'state' : '1'});
	},

	methods : {

		openPicker() {
	        this.$refs.picker.open();
	    },

		gogo () {
			console.log('googgoog');

			if(this.user.mobile == ''){
				this.$dialog.toast({
                    mes: '请输入电话',
                    timeout: 1500,
                    icon: 'error',
                });
                return;
			}

			if(this.user.mobile.length != 11){
				this.$dialog.toast({
                    mes: '请输入正确电话位数',
                    timeout: 1500,
                    icon: 'error',
                });
                return;
			}

			if(this.user.name == ''){
				this.$dialog.toast({
                    mes: '请输入姓名',
                    timeout: 1500,
                    icon: 'error',
                });
                return;
			}

			var para = {
				'sale_code' : this.$route.query.sale_code,
				'attr_id' : this.$route.query.attr_id,
				'num' : this.num,
				'mobile' : this.user.mobile,
				'total_price' : parseFloat(this.guide_price * this.num * 100).toFixed(0),
				'name' : this.user.name,
				'pay_company_code' : this.$route.query.pay_company_code,
				'remark' : this.user.remark,
			};


			if(this.tour_date_type == '1'){		//需要填出游时间
				console.log(Date.parse(this.user.tour_date.replace(/-/g,'/')));
				console.log(Date.parse(date2str(new Date()).replace(/-/g,'/')));
				if(Date.parse(this.user.tour_date.replace(/-/g,'/'))
				 < Date.parse(date2str(new Date()).replace(/-/g,'/'))){
					this.$dialog.toast({
	                    mes: '请选择合理的出游时间',
	                    timeout: 1500,
	                    icon: 'error',
	                });
	                return;
				}

				para['tour_date'] = this.user.tour_date;
			}else if(this.tour_date_type != '0'){	//价格日历
				para['tour_date'] = this.$route.query.tour_date_type;
			}else{	//==0
				
			}

			if(this.cardno_state == '1'){
				if(this.user.cardno == ''){
					this.$dialog.toast({
	                    mes: '请输入身份证信息',
	                    timeout: 1500,
	                    icon: 'error',
	                });
	                return;
				}

				const resCode = identityCodeValid(this.user.cardno);

				if(!resCode.pass){
					this.$dialog.toast({
	                    mes: resCode.tip,
	                    timeout: 1500,
	                    icon: 'error',
	                });
	                return;
				}

				para['cardno'] = this.user.cardno;
			}

			if(this.$route.query.u != undefined){
				para['openid'] = this.$route.query.u;
			}

			console.log('用户信息');
			console.log(this.userdata);
			console.log('下单参数');
			console.log(para);

			this.$store.dispatch('createOrder', {
				'para' : para,
				'company_code' : this.company_code,
				'callback' : (code) => {
					console.log('lalalala ' + code);
					this.$router.push({ 
						'name': 'paysuccess', 
						'query' : { 
							'company_code' : this.company_code,
							'code' : code,
						}
					});
				},
				'error' : (msg) => {
					this.$dialog.toast({
	                    mes: '下单失败 , ' + msg,
	                    timeout: 1500,
	                    icon: 'error',
	                });
				}
			});
		},


		addressList () {
			this.$router.push({ 
				'name': 'addresslist', 
				'query' : { 
					'company_code' : this.company_code,
				}
			});

		},
	},



}
	

</script>

<style scope>
.bb {
	border-bottom: 1px solid #ddd;
}

.product{
	background-color: #fafafa;
	/*padding-bottom: 10px;*/
	height: 140px;
}

.product .img {
	width: 40%;
	/*height: 110px;*/
	/*padding-bottom: 10px;*/
	text-align: center;
	margin-top: 10px;
}

.product .info {
	width: 58%;
	margin-top: 10px;
}

.product .info .model{
	font-size: 14px;
	color: #666;
	margin-top: 5px;
}

.product .info .p_n {

}

.product .info .p_n .price {
	font-size: 18px;
}

.product .info .p_n .num {
	line-height: 24px;
}

.footer1 {
	/*height: 50px;
	width: 100%;*/
	/*border-top:solid 1px #eee;*/
    position:fixed;
    bottom:0;
    z-index: 9999;
}

.footer1 .total {
	float: right;
	text-align: right;
	/*width: 150px;*/
	/*margin-top: 15px;*/
	/*margin-right: 20px;*/
}

.footer1 .buy{
	/*float: right;*/
	width: 100%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	color: #fff;

}

</style>